<template>
  <div>
    <div class="d-flex justify-content-between">
      <h4 class="panel-title">
        <span>我的任务</span>
        <span class="panel-title-num" v-show="taskTotal">{{ taskTotal }}</span>
      </h4>
    </div>

    <div v-loading="loading">
      <el-table :data="tasks" border class="table-sm">
        <el-table-column label="任务名称" prop="taskName" align="center"></el-table-column>
        <el-table-column label="未处理/已处理" prop="taskCount" align="center">
          <template slot-scope="scope">
            <span v-if="+scope.row.taskType === 3">7</span>
            <span v-else>{{ scope.row.taskCount }}/{{ scope.row.process }}</span>
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center">
          <template slot-scope="scope">
            <el-button type="text" @click="showDialog(scope.row)">去处理</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <task-archive :visible.sync="archiveVisible" type="1"></task-archive>
    <task-recommend :visible.sync="recommendVisible" type="2"></task-recommend>
    <task-project-manage :visible.sync="projectVisible"></task-project-manage>
    <county-approval type="27" :visible.sync="countyApprovalVisible"></county-approval>
    <county-approval type="28" :visible.sync="cityApprovalVisible"></county-approval>
    <county-approval type="29" :visible.sync="proApprovalVisible"></county-approval>
  </div>
</template>
<script>
import { mapGetters } from 'vuex'
import TaskArchive from '@/gov/views/index/TaskArchive'
import TaskRecommend from '@/gov/views/index/TaskRecommend'
import TaskProjectManage from '@/gov/views/index/TaskProjectManage'
import CountyApproval from '@/gov/views/index/task/CountyApproval'
export default {
  components: {
    CountyApproval,
    TaskArchive,
    TaskRecommend,
    TaskProjectManage,
  },
  props: {
    height: {
      type: Number,
      default: 300,
    },
  },
  data() {
    return {
      loading: false,
      archiveVisible: false,
      recommendVisible: false,
      projectVisible: false,
      countyApprovalVisible: false,
      cityApprovalVisible: false,
      proApprovalVisible: false,
    }
  },
  computed: {
    ...mapGetters(['govTaskCount', 'user']),
    orgLever() {
      return +this.user.orgRegionLever
    },
    notTown() {
      return +this.user.orgRegionLever < 4
    },
    tasks() {
      const data = [
        {
          taskType: 1,
          taskName: '建档项目',
          taskCount: this.getNum(1),
          process: this.getProcess(1),
        },
      ]
      // 都可以看到固定任务，但是只有区县可以操作
      data.push({
        taskType: 2,
        taskName: '推荐项目',
        taskCount: this.getNum(2),
        process: this.getProcess(2),
      })
      if (this.notTown) {
        data.push({
          taskType: 30 - this.orgLever,
          taskName: '审批推荐',
          taskCount: this.getNum(30 - this.orgLever),
          process: this.getProcess(30 - this.orgLever),
        })
      }
      data.push({
        taskType: 3,
        taskName: '数据管理',
        taskCount: 7,
      })
      return data
    },
    taskTotal() {
      return this.tasks.reduce((prev, curr) => prev + curr.taskCount, 0)
    },
  },
  watch: {},
  created() {
    this.getData()
  },
  mounted() {},
  methods: {
    getNum(type) {
      return (this.govTaskCount && this.govTaskCount[type] && +this.govTaskCount[type].num) || 0
    },
    getProcess(type) {
      return (this.govTaskCount && this.govTaskCount[type] && +this.govTaskCount[type].process) || 0
    },
    async getData() {
      this.loading = true
      await this.$utils.promise(this.$store.dispatch('getMyTaskCount'))
      this.loading = false
    },
    showDialog({ taskType, id }) {
      switch (taskType) {
        case 1:
          this.showArchiveDialog()
          break
        case 2:
          this.showRecommendDialog()
          break
        case 3:
          this.projectVisible = true
          break
        case 27:
          this.countyApprovalVisible = true
          break
        case 28:
          this.cityApprovalVisible = true
          break
        case 29:
          this.proApprovalVisible = true
          break
        default:
          break
      }
    },
    showArchiveDialog() {
      this.archiveVisible = true
    },
    showRecommendDialog() {
      this.recommendVisible = true
    },
  },
}
</script>
<style lang="scss" scoped>
.panel-title {
  position: relative;
  font-size: 1.142857rem;

  .panel-title-num {
    position: absolute;
    right: -1rem;
    padding: 0 0.21rem;
    border-radius: 1rem;
    background-color: red;
    font-size: 10px;
    color: #fff;
    line-height: 1;
    display: inline-block;
    text-align: center;
  }
}
</style>
